<template>
	<el-container class="ziduanguanli">
		<el-header>
			<el-button
				type="primary"
				size="mini"
				icon="el-icon-plus"
				@click="addPropertyFunc('新增步骤')"
				:loading="stepLoading"
				:disabled="stepLoading"
				>新增步骤</el-button
			>
			<el-button type="primary" size="mini" icon="el-icon-sort" @click="stepSortFunc('步骤')" :loading="stepLoading" :disabled="stepLoading"
				>排序步骤</el-button
			>
		</el-header>

		<div style="width: 100%" class="divya">
			<el-main
				v-loading="stepLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-tabs v-model="activeNameTabs" @tab-click="handleClick">
					<el-tab-pane :name="item.raiseType" v-for="(item, index) in tableData" :key="item.raiseType" :label="`${item.fieldName}基金`">
						<el-collapse v-model="activeName" accordion>
							<el-collapse-item
								:title="items.fieldName"
								:name="items.stepNum"
								v-for="items in item.childNodeList"
								:key="items.fieldCode"
							>
								<template slot="title">
									{{ items.fieldName }}
									<el-button
										style="margin-left: 16px"
										type="text"
										icon="el-icon-edit"
										@click.stop="addPropertyFunc('编辑步骤', items)"
									></el-button>
									<el-button type="text" icon="el-icon-delete" @click.stop="stepClick(items, '删除该步骤')"></el-button>
									<el-button
										type="text"
										icon="el-icon-circle-plus-outline"
										@click.stop="
											addPropertyFunc('新增字段', { raiseType: items.raiseType, cascaderIdList: items.cascaderIdList })
										"
									></el-button>
									<el-button
										type="text"
										icon="el-icon-sort"
										class="paixuziduan"
										@click.stop="stepSortFunc('字段', items)"
									></el-button>
								</template>

								<template v-if="items.childNodeList && Array.isArray(items.childNodeList) && items.childNodeList.length">
									<div class="fieidUls">
										<!-- 表头 -->
										<li class="fieidLis">
											<div
												class="fieidDivsHeader"
												v-for="tab in tableHeader"
												:key="tab.key"
												:style="`width:${100 / tableHeader.length}%;`"
											>
												{{ tab.value }}
											</div>
										</li>

										<!-- 表单 -->
										<li v-for="(tab, indexs) in items.childNodeList" :key="index + indexs" class="fieidLis">
											<div class="fieidDivsItem" :style="`width:${100 / 7}%;`">
												<div :style="`width: ${tab.hasChildren ? 9 : 10}0%;${tab.style ? tab.style : ''}`">
													{{ tab.fieldName }}
												</div>
												<div
													style="width: 10%"
													v-if="tab.hasChildren"
													class="tubiaofuji"
													@click="childrenOpen(items, tab, indexs)"
												>
													<i class="el-icon-arrow-right" v-if="tab.iconOpen"></i>
													<i class="el-icon-arrow-down" v-if="!tab.iconOpen"></i>
												</div>
											</div>
											<div class="fieidDivsItem" :style="`width:${100 / 7}%;`">
												<el-button
													type="text"
													@click="
														addPropertyFunc('新增字段', { raiseType: tab.raiseType, cascaderIdList: tab.cascaderIdList })
													"
													>新增</el-button
												>
												<el-button type="text" @click="addPropertyFunc('编辑字段', tab)">编辑</el-button>
												<el-button type="text" @click="stepClick(tab, '删除该字段', items)">删除</el-button>
											</div>
											<div class="fieidDivsItem" :style="`width:${100 / 7}%;`">
												{{ tab.fieldCode }}
											</div>
											<div class="fieidDivsItem" :style="`width:${100 / 7}%;`">
												<el-switch
													v-model="tab.isVisibleBoolean"
													active-color="#13ce66"
													inactive-color="#dcdfe6"
													@change="switchChange(items, tab)"
												>
												</el-switch>
											</div>
											<div class="fieidDivsItem" :style="`width:${100 / 7}%;`">
												{{ tab.describe }}
											</div>
											<div class="fieidDivsItem" :style="`width:${100 / 7}%;`">
												{{ tab.createdDate | timerConversionDate | timerConversionStr }}
											</div>
											<div class="fieidDivsItem" :style="`width:${100 / 7}%;`">
												{{ tab.createdUser }}
											</div>
										</li>
									</div>
								</template>

								<template v-else>
									<el-empty description="暂无数据" :image-size="100"></el-empty>
								</template>
							</el-collapse-item>
						</el-collapse>
					</el-tab-pane>
				</el-tabs>
			</el-main>
		</div>

		<addProperty
			:addPropertyShow="addPropertyShow"
			@addPropertyFunc="addPropertyFunc"
			:title="propertyTitle"
			:allData="allData"
			@getData="getData"
			ref="addProperty"
		/>
		<stepSort
			:sortTitle="sortTitle"
			:stepSortShow="stepSortShow"
			@stepSortFunc="stepSortFunc"
			:title="propertyTitle"
			:allData="allData"
			@getData="getData"
			@handleClick="handleClick"
			ref="sortCom"
		/>
	</el-container>
</template>
<script>
import addProperty from './components/addProperty/index.vue'
import stepSort from './components/stepSort/index.vue'
import { propertyDelete, editStepNum, propertyEdit, getOriginalData } from '@/api/productApi/fieldManagement'
import { jsonArray } from '@/api/productApi/file'
import { treeData, processingRawData, tableHeader } from './treeData'
export default {
	name: 'FieldManagement',

	components: {
		addProperty,
		stepSort
	},

	data() {
		return {
			tableHeader,
			activeName: '',
			activeNameTabs: '1',
			addPropertyShow: false,
			stepSortShow: false,
			propertyTitle: '',
			stepLoading: false,
			sortTitle: '', // 排序标题
			allData: [], // 处理后数据
			dataBeforeProces: [], // 处理前数据
			tableData: []
		}
	},

	mounted() {
		this.getData()
	},

	methods: {
		handleClick() {
			this.activeName = ''
		},

		// 查看子级
		childrenOpen(parenData, childrenData, childrenIndex) {
			childrenData.childNodeList.forEach(item => {
				this.$set(item, 'style', 'width:90% !important;margin-left:10% !important;')
			})
			this.$set(childrenData, 'iconOpen', !childrenData.iconOpen)
			if (!childrenData.iconOpen) {
				parenData.childNodeList.splice(childrenIndex + 1, 0, ...childrenData.childNodeList)
			} else {
				parenData.childNodeList = parenData.childNodeList.filter(item => item.parentId !== childrenData.fieldId)
			}
		},

		// 修改是否可见
		switchChange(parentData, obj) {
			const form = { ...obj }
			this.$set(form, 'isVisible', form.isVisibleBoolean ? '0' : '1')
			propertyEdit(form).then(res => {
				if (res.msgCode === 'Y') {
					this.dataBeforeProces.forEach(item => {
						if (item.fieldId === obj.fieldId) {
							this.$set(obj, 'isVisibleBoolean', obj.isVisibleBoolean)
							this.$set(obj, 'isVisible', obj.isVisibleBoolean ? '0' : '1')
							this.$set(item, 'isVisibleBoolean', obj.isVisibleBoolean)
							this.$set(item, 'isVisible', obj.isVisibleBoolean ? '0' : '1')
						}
					})
				} else {
					this.$set(obj, 'isVisibleBoolean', !obj.isVisibleBoolean)
					this.$set(obj, 'isVisible', obj.isVisibleBoolean ? '0' : '1')
				}
			})
		},

		// 删除
		stepClick(obj, msg, parenData) {
			this.operatorComfirm(() => {
				this.loading = true
				propertyDelete(obj.fieldId)
					.then(res => {
						if (res.msgCode === 'Y') {
							this.$message({ type: 'success', message: res.msg })
							if (msg.includes('步骤')) {
								const list = jsonArray(this.tableData.find(item => item.raiseType === obj.raiseType).childNodeList).filter(
									item => item.fieldId !== obj.fieldId
								)
								// 如果是删除步骤，则将所有步骤重新排序发给后台
								list.forEach((item, index) => {
									item.stepNum = index + 1
								})
								editStepNum(list).then(res => {
									if (res.msgCode === 'Y') {
										this.getData()
									}
								})
							} else {
								this.getData()
							}
						}
					})
					.finally(() => {
						this.$nextTick(() => {
							this.loading = false
						})
					})
			}, `${msg}`)
		},

		// 获取数据
		getData(num) {
			if (!num) {
				this.stepLoading = true
			}
			getOriginalData()
				.then(res => {
					if (res.msgCode === 'Y') {
						// 写入是否可见状态
						res.data.body.forEach(item => {
							item.isVisibleBoolean = item.isVisible === '0'
						})
						this.dataBeforeProces = jsonArray(res.data.body) // 未处理的所有数据
						// 新增或编辑需要的下拉数据、表格展示的数据
						this.allData = treeData(processingRawData(res.data.body))
						this.tableData = jsonArray(this.allData)
					}
				})
				.finally(() => {
					this.stepLoading = false
				})
		},

		// 新增/编辑
		addPropertyFunc(title, obj) {
			this.propertyTitle = title
			this.addPropertyShow = !this.addPropertyShow
			if (obj) {
				this.$refs.addProperty.edit(jsonArray(obj))
			}
		},

		// 排序
		stepSortFunc(title, obj) {
			if (obj) {
				this.$refs.sortCom.fundTypeChange(obj.childNodeList)
			}
			if (title) {
				this.sortTitle = title
			}
			this.stepSortShow = !this.stepSortShow
		}
	}
}
</script>
<style lang='scss' src='./index.scss' scoped></style>
